import React from 'react'
import PropTypes from 'prop-types'
import { Form, Input, Modal, Select, Row, Col, DatePicker, Radio } from 'antd'
import { basicDictTypeData, sexTypeData } from 'utils/seletLocalData'
import { converDate } from 'utils'
import moment from 'moment'


const FormItem = Form.Item
const Option = Select.Option
const RadioGroup = Radio.Group

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 14,
  },
}

const modal = ({
  item = {},
  onOk,
  roleData,
  form: {
    getFieldDecorator,
    validateFields,
    getFieldsValue,
  },
  ...modalProps
}) => {
  const handleOk = () => {
    validateFields((errors) => {
      if (errors) {
        return
      }
      let fieldsValues = getFieldsValue()
      fieldsValues.birthday = fieldsValues.birthday.format('YYYY-MM-DD')
      const data = {
        ...fieldsValues,
        ID: item.ID,
      }
      // data.address = data.address.join(' ')
      onOk(data)
    })
  }
  const modalOpts = {
    ...modalProps,
    onOk: handleOk,
  }
  const typeData = basicDictTypeData.map(d => <Option key={d.value}>{d.value}</Option>)
  const sexData = sexTypeData.map(d => <Option key={d.key}>{d.value}</Option>)
  const roleOptions = roleData.map(d => <Option key={d.id}>{d.name}</Option>)
  const dateFormat = 'DD/MM/YYYY'
  return (
    <Modal {...modalOpts}>
      <Form layout="horizontal">
        <Row>
          <Col span={12}>
            <FormItem label="UserName" hasFeedback {...formItemLayout}>
              {getFieldDecorator('username', {
                initialValue: item.username,
                rules: [
                  {
                    required: true,
                    max: 255,
                  },
                ],
              })(<Input/>)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label="NickName" hasFeedback {...formItemLayout}>
              {getFieldDecorator('nickname', {
                initialValue: item.nickname,
                rules: [
                  {
                    max: 255,
                  },
                ],
              })(<Input/>)}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <FormItem label="FirstName" hasFeedback {...formItemLayout}>
              {getFieldDecorator('firstName', {
                initialValue: item.firstName,
                rules: [
                  {
                    required: true,
                    max: 255,
                  },
                ],
              })(<Input/>)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label="MiddleName" hasFeedback {...formItemLayout}>
              {getFieldDecorator('middleName', {
                initialValue: item.middleName,
                rules: [
                  {
                    max: 255,
                  },
                ],
              })(<Input/>)}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <FormItem label="LastName" hasFeedback {...formItemLayout}>
              {getFieldDecorator('lastName', {
                initialValue: item.lastName,
                rules: [
                  {

                    max: 255,
                  },
                ],
              })(<Input/>)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label="Phone" hasFeedback {...formItemLayout}>
              {getFieldDecorator('phone', {
                initialValue: item.phone,
                rules: [
                  {
                    max: 255,
                  },
                ],
              })(<Input/>)}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <FormItem label="Sex" hasFeedback {...formItemLayout}>
              {getFieldDecorator('sex', {
                initialValue: item.sex,
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<Select style={{ width: '100%' }}>{sexData}</Select>)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label="Telephone" hasFeedback {...formItemLayout}>
              {getFieldDecorator('telephone', {
                initialValue: item.telephone,
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<Input/>)}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <FormItem label="Birthday" hasFeedback {...formItemLayout}>
              {getFieldDecorator('birthday', {
                initialValue: item.birthday ? moment(converDate(item.birthday), dateFormat) : '',
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<DatePicker style={{ width: '100%' }} format={dateFormat}/>)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label="Email" hasFeedback {...formItemLayout}>
              {getFieldDecorator('email', {
                initialValue: item.email,
                rules: [
                  {

                    pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/,
                    message: 'E-mail pattern error!',
                  },
                ],
              })(<Input/>)}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <FormItem label="Status" hasFeedback {...formItemLayout}>
              {getFieldDecorator('status', {
                initialValue: item.status,
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<RadioGroup><Radio value={1}>valid</Radio><Radio value={2}>unvalid</Radio></RadioGroup>)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label="Role" hasFeedback {...formItemLayout}>
              {getFieldDecorator('roleId', {
                initialValue: item.roleId ? item.roleId.toString() : '',
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<Select style={{ width: '100%' }}>{roleOptions}</Select>)}
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Modal>
  )
}

modal.propTypes = {
  form: PropTypes.object.isRequired,
  type: PropTypes.string,
  item: PropTypes.object,
  onOk: PropTypes.func,
  roleData: PropTypes.array,
}

export default Form.create()(modal)
